.focus-ring {
  @apply ring-0 ring-border-focus outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg;
}

.focus-ring-input {
  @apply ring-0 focus-within:ring-2 focus-within:ring-border-focus;
}

.focus-ring-group {
  @apply ring-0 ring-border-focus outline-hidden group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-bg;
}

@utility reset-default-focus-ring {
  @apply ring-0 ring-transparent outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:ring-offset-transparent;
}

@utility reset-default-focus-ring-input {
  @apply ring-0 focus-within:ring-0 focus-within:ring-transparent;
}

@utility reset-default-focus-ring-group {
  @apply ring-0 outline-none group-focus-visible:ring-0 group-focus-visible:ring-transparent group-focus-visible:ring-offset-0 group-focus-visible:ring-offset-transparent;
}

.focus-ring-demo {
  @apply ring-2 ring-offset-2 ring-offset-bg;
}

.focus-ring-input-demo {
  @apply ring-2 ring-border-focus;
}

.focus-ring-group-demo {
  @apply ring-2;
}

@utility reset-default-focus-ring-demo {
  @apply ring-0 ring-offset-0 ring-offset-transparent;
}

@utility reset-default-focus-ring-input-demo {
  @apply ring-0 ring-transparent;
}

@utility reset-default-focus-ring-group-demo {
  @apply ring-0;
}

/* Minimal variant */

[data-focus-style="minimal"] .focus-ring {
  @apply reset-default-focus-ring ring-border-focus-muted outline-hidden focus-visible:ring-2;
}

[data-focus-style="minimal"] .focus-ring-input {
  @apply reset-default-focus-ring-input outline-hidden focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus-muted;
}

[data-focus-style="minimal"] .focus-ring-group {
  @apply reset-default-focus-ring-group outline-hidden group-focus-visible:ring-2 group-focus-visible:ring-border-focus-muted;
}

/* Minimal demos */

[data-focus-style="minimal"] .focus-ring-demo {
  @apply reset-default-focus-ring-demo ring-2 ring-border-focus-muted;
}

[data-focus-style="minimal"] .focus-ring-input-demo {
  @apply border-border-focus reset-default-focus-ring-input-demo ring-2 ring-border-focus-muted;
}
